<template>
  <TemplateTitle titleName="各厂水量目标完成情况"></TemplateTitle>
  <div class="chartContian">
    <div class="total">
      <div style="width: 12%"></div>
      <div class="precent">
        <chart-precent :chartData="chartTotalDataList"></chart-precent>
      </div>
    </div>
    <chart-completion-status
      :chartData="chartDataList"
      xAxisName="name"
      :option="option"
      :chartType="chartType"
      :currentColorList="currentColorList"
      :seriesDataList="seriesDataList"
      :chartMax="chartMax"
      :twoYAxis="false"
      :unit="unit"
      :orient="'horizontal'"
    ></chart-completion-status>
    <div class="xlabelName">
      <div
        class="labelItem"
        v-for="item in chartDataNameList"
        :key="item"
        :style="{ width: 100 / chartDataNameList.length + '%' }"
      >
        <span>目标</span>
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="legend">
      <p v-for="(item, index) in legendList" :key="index">
        <span :style="{ background: currentColorList[index] }"></span
        ><a>{{ item }}</a>
      </p>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";

import homeHttp from "@/https/home.js";
import { onMounted, ref } from "vue";
import ChartPrecent from "./charts/ChartPrecent.vue";
import ChartCompletionStatus from "./charts/ChartCompletionStatus.vue";
const legendList = ref([]);
const currentColorList = ref([]);
const seriesDataList = ref([]);
const colorList = ref([
  "#63b2ee",
  "#76da91",
  "#f8cb7f",
  "#f89588",
  "#7cd6cf",
  "#7898e1",
  "#efa666",
  "#eddd86",
  "#9987ce",
  "#63b2ee",
  "#76da91",
  "#9192ab",
]);
const chartDataList = ref([]);
const chartDataNameList = ref(["星沙厂", "城北厂", "城南厂", "城西厂"]);
const chartTotalDataList = ref([]);
const option = ref({});
const chartType = ref([]);
const chartMax = ref(0);
const unit = ref(["单位:万吨"]);

onMounted(() => {
  querywaterTargetCompletion();
  queryTotal();
});

const queryTotal = () => {
  homeHttp.queryTotal().then((res) => {
    if (res.data.code == 200) {
      chartTotalDataList.value.push(res.data.data["星沙"]);
      chartTotalDataList.value.push(res.data.data["城北"]);
      chartTotalDataList.value.push(res.data.data["城南"]);
      chartTotalDataList.value.push(res.data.data["城西"]);
      // for (let key in res.data.data) {
      //     chartTotalDataList.value.push(res.data.data[key]);
      // }
    }
  });
};
const querywaterTargetCompletion = () => {
  homeHttp.querywaterTargetCompletion().then((res) => {
    if (res.data.code == 200) {
      let list = [];
      for (let key in res.data.data) {
        list.push({
          name: key,
          list: res.data.data[key],
        });
      }
      let chartList = [];
      let targetMax = 0;
      let actualMax = 0;
      list[0].list.forEach((item) => {
        console.log(item.targetWate);
        targetMax = targetMax + parseInt(item.targetWater);
        actualMax = actualMax + parseInt(item.actualWater);
      });

      let len = list[0].list.length;
      let legArr = [];
      let colorArr = [];
      let seriesArr = [];
      for (let i = 0; i <= len - 1; i++) {
        legArr.push(i + 1 + "月");
        colorArr.push(colorList.value[i]);
        seriesArr.push(i + 1 + "月(目标值)");
      }
      for (let i = 0; i <= len - 1; i++) {
        seriesArr.push(i + 1 + "月(实际值)");
      }
      currentColorList.value = colorArr.concat(colorArr);
      seriesDataList.value = seriesArr;
      console.log("======", currentColorList, seriesDataList);
      legendList.value = legArr;

      list.forEach((item, index) => {
        let chartObj = {};
        chartObj.name = item.name.replace("分", " ");
        item.list.forEach((t, n) => {
          chartObj[t.month + "月(目标值)"] = t.targetWater;
          chartObj[t.month + "月(实际值)"] = t.actualWater;
        });
        chartList.push(chartObj);
      });
      console.log(targetMax, actualMax);
      console.log(list, chartList);
      chartMax.value = targetMax > actualMax ? targetMax : actualMax;
      console.log("................", chartList);
      chartList.forEach((item) => {
        // if (item.name == '总公司') {
        //     chartDataList.value[0] = item
        // }
        if (item.name == "星沙") {
          chartDataList.value[0] = item;
        }
        if (item.name == "城北") {
          chartDataList.value[1] = item;
        }
        if (item.name == "城南") {
          chartDataList.value[2] = item;
        }
        if (item.name == "城西") {
          chartDataList.value[3] = item;
        }
      });
    }
  });
};
</script>

<style scoped lang="less">
.chartContian {
  position: relative;

  .total {
    width: 100%;
    z-index: 10000;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 25rem;

    .precent {
      width: 88%;
    }
  }
}

.xlabelName {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .labelItem {
    display: flex;
    flex-direction: row;
    justify-content: center;

    span {
      display: inline-block;
      width: 14rem;
      font-size: 12rem;
      color: #7190b6;
      margin: 0 5rem;
    }
  }
}

.legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10rem;

  p {
    color: #7190b6;
    margin-right: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12rem;

    span {
      display: inline-block;
      width: 12rem;
      height: 12rem;
      border-radius: 6rem;
      margin-right: 6rem;
      margin-bottom: 4rem;
    }
  }
}
</style>
